<template>
  <!-- 订单状态 -->
  <div class="order">
    <span>订单状态 :</span>
    <el-button-group>
      <el-button size="small">全部
        <!-- <span>223</span> -->
      </el-button>
      <el-button size="small">待付款</el-button>
      <el-button size="small">待发货</el-button>
      <el-button size="small">待收货</el-button>
      <el-button size="small">待评价</el-button>
      <el-button size="small">交易完成</el-button>
      <el-button size="small">已退款</el-button>
      <el-button size="small">已删除</el-button>
    </el-button-group>
  </div>
  <!-- 时间选择 -->
  <div class="time">
    <span>时间选择 :</span>
    <el-button-group>
      <el-button size="small">全部
        <!-- <span>223</span> -->
      </el-button>
      <el-button size="small">今天</el-button>
      <el-button size="small">昨天</el-button>
      <el-button size="small">最近7天</el-button>
      <el-button size="small">最近30天</el-button>
      <el-button size="small">本月</el-button>
      <el-button size="small">本年</el-button>
      <!-- 时间范围选择 -->
      <div class="block">
        <el-date-picker v-model="value2"
                        type="datetimerange"
                        :shortcuts="shortcuts"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small">
        </el-date-picker>
      </div>
    </el-button-group>
  </div>
  <div class="active">
    <!-- 活动类型 -->
    <span>活动类型 :</span>
    <el-select v-model="value3"
               clearable
               placeholder="请选择"
               size="medium">
      <el-option v-for="item in options3"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>
    <!-- 商户名称 -->
    <span class="Merchant">商户名称 :</span>
    <el-select v-model="value4"
               clearable
               placeholder="请选择"
               size="medium">
      <el-option v-for="item in options4"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>

    <!-- 商户类别 -->
    <span class="Merchant">商户类别 :</span>
    <el-select v-model="value5"
               clearable
               placeholder="请选择"
               size="medium">
      <el-option v-for="item in options5"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
                 l>
      </el-option>
    </el-select>

  </div>

  <div class="keyword">
    <!-- 关键字 -->
    <span class="word"> 关键字 :</span>
    <el-select v-model="value"
               multiple
               filterable
               remote
               reserve-keyword
               placeholder="请输入关键词"
               :remote-method="remoteMethod"
               :loading="loading">
      <el-option v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>

    <!-- 关键字 -->
    <span class="user">用户信息 :</span>
    <div class="userinput">
      <el-input placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="input">
      </el-input>
    </div>

    <!--表单-->
    <div class="myfrom">
      <el-table :data="tableData"
                style="width: 100%"
                max-height="520">
        <el-table-column fixed
                         prop="date"
                         label="商品信息"
                         width="160">
        </el-table-column>
        <el-table-column prop="name"
                         label="单价/数量"
                         width="120">
        </el-table-column>
        <el-table-column prop="province"
                         label="维权"
                         width="120">
        </el-table-column>
        <el-table-column prop="city"
                         label="实付金额"
                         width="120">
        </el-table-column>
        <el-table-column prop="address"
                         label="买家/收货人"
                         width="240">
        </el-table-column>
        <el-table-column prop="zip"
                         label="商家名称"
                         width="120">
        </el-table-column>
        <el-table-column prop="statu"
                         label="交易状态"
                         width="120">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="120">
          <template #default="scope">
            <el-button @click.prevent="deleteRow(scope.$index, tableData)"
                       type="text"
                       size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>

</template>

<script>
export default {
  // 时间范围选择
  data () {
    return {

      order: "",
      time: "",


      shortcuts: [{
        text: '最近一周',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end]
        }
      }, {
        text: '最近一个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end]
        }
      }, {
        text: '最近三个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end]
        }
      }],
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',

      // 活动类型
      options3: [{
        value: '选项1',
        label: '普通订单'
      }, {
        value: '选项2',
        label: '秒杀订单'
      }, {
        value: '选项3',
        label: '预售订单'
      }, {
        value: '选项4',
        label: '助理订单'
      }, {
        value: '选项5',
        label: '拼团订单'
      }],
      value3: '',

      // 商户名称
      options4: [{
        value: '选项1',
        label: '西西里数码手机店'
      }, {
        value: '选项2',
        label: '京东购物商场'
      }, {
        value: '选项3',
        label: '拼多多优质品牌'
      }, {
        value: '选项4',
        label: '品牌衣物专卖店'
      }, {
        value: '选项5',
        label: '千鸟旗舰店'
      }],
      value4: '',

      // 商户类别
      options5: [{
        value: '选项1',
        label: '自营'
      }, {
        value: '选项2',
        label: '非自营'
      },],
      value5: '',

      // 关键字
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],


      input: "",

      // 表单
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        statu: '已经交易'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        statu: '已经交易'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        statu: '已经交易'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        statu: '已经交易'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        statu: '已经交易'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        statu: '已经交易'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        statu: '已经交易'
      }]





    };


  },
  mounted () {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  methods: {
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    }
  }






}
</script>


<style lang="scss" scoped>
html,
body {
  position: relative;
  margin: 0;
  padding: 0;
}
.order,
.time,
.keyword,
.active {
  margin-bottom: 20px;
  background-color: white;
  position: relative;
}
span {
  font-size: 13px;
  margin-right: 12px;
}
// 时间选择CSS
.block {
  position: absolute;
  left: 46%;
}
// 商户名称
.Merchant {
  margin-left: 50px;
}
.word {
  margin-left: 13px;
}
// 用户信息
.user {
  margin-left: 50px;
}
// 用户信息搜索栏
.userinput {
  display: inline-block;
  width: 225px;
}
// 表单
.myfrom {
  margin-top: 30px;
}
</style>